const { defineConfig } = require('@vue/cli-service')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const isProd = process.env.NODE_ENV === 'production'
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
      sass: {
        sassOptions: { outputStyle: "expanded" }
      }
    }
  },
  devServer: {
    port: 5002,
    proxy: {
      '/api': {
        target: "http://127.0.0.1:3000",
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  // 不生成 SourceMap 文件
  productionSourceMap: !isProd,
  configureWebpack: {
    module: {
      rules: [
        // 小于 200 * 1024 （200kb） 尺寸的照片转为 base64
        {
          test: /\.(png|jpg|gif|webp)$/i,
          use: [{
            loader: 'url-loader',
            options: {
              limit: 200 * 1024,
              esModule: false
            }
          }],
          type: 'javascript/auto'
        },
      ],
    },
    plugins: isProd ? [
      // 使用 gzip 压缩文件 需要后端配合 若使用 http-server 开启本地服务需要使用  http-server -g
      new CompressionWebpackPlugin({
        test: /\.js$|\.html$|\.css/,
        threshold: 10240,
        deleteOriginalAssets: false
      })
    ] : []
  },
  chainWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      // 生产环境不适用 console.log 输出内容
      // 下面一行代码无用
      // config.optimization.minimizer[0].iptions.terserOptions.compress.drop_console = true
      // 可以使用下面代码
      config.optimization
        .minimizer('terser')
        .tap(args => {
          Object.assign(args[0].terserOptions.compress, {
            pure_funcs: ['console.log']
          })
          return args
        })
    }
  }
})
